﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<IEnumerable<YourStore.Models.Product>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
   Your Store
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
 <script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var buttons = { previous: $('#lofslidecontent45 .lof-previous'),
            next: $('#lofslidecontent45 .lof-next')
        };

        $obj = $('#lofslidecontent45').lofJSidernews({ interval: 4000,
            direction: 'opacitys',
            easing: 'easeInOutExpo',
            duration: 1200,
            auto: true,
            maxItemDisplay: 4,
            navPosition: 'horizontal', // horizontal
            navigatorHeight: 32,
            navigatorWidth: 80,
            mainWidth: 690,
            buttons: buttons
        });
    });
</script>
   <div id="right">
   <div id="slideshow">
      <div id="lofslidecontent45" class="lof-slidecontent" style="width:690px; height:300px;">
        <div class="preload">
          <div></div>
        </div>
        <!-- MAIN CONTENT -->
        <div class="lof-main-outer" style="width:690px; height:300px;">
          <ul class="lof-main-wapper">
            <li><img src="../../Content/Images/slide1.jpg" width="690" height="300" alt="Slider 1" /></li>
            <li><img src="../../Content/Images/slide2.jpg" width="690" height="300" alt="Slider 2" /></li>
            <li><img src="../../Content/Images/slide3.jpg" width="690" height="300" alt="Slider 3" /></li>
            <li><img src="../../Content/Images/slide4.jpg" width="690" height="300" alt="Slider 4" /></li>
            <li><img src="../../Content/Images/slide5.jpg" width="690" height="300" alt="Slider 5" /></li>
            <li><img src="../../Content/Images/slide6.jpg" width="690" height="300" alt="Slider 6" /></li>
          </ul>
        </div>
        <!-- END MAIN CONTENT -->
        <!-- NAVIGATOR -->
        <div class="lof-navigator-wapper">
          <div onclick="return false" href="" class="lof-next">Next</div>
          <div class="lof-navigator-outer">
            <ul class="lof-navigator">
              <li><img src="../../Content/Images/slide1-tn.jpg" width="70" height="25" alt="Slider 1" /></li>
              <li><img src="../../Content/Images/slide2-tn.jpg" width="70" height="25" alt="Slider 2" /></li>
              <li><img src="../../Content/Images/slide3-tn.jpg" width="70" height="25" alt="Slider 3" /></li>
              <li><img src="../../Content/Images/slide4-tn.jpg" width="70" height="25" alt="Slider 4" /></li>
              <li><img src="../../Content/Images/slide5-tn.jpg" width="70" height="25" alt="Slider 5" /></li>
              <li><img src="../../Content/Images/slide6-tn.jpg" width="70" height="25" alt="Slider 6" /></li>
            </ul>
          </div>
          <div onclick="return false" href="" class="lof-previous">Previous</div>
        </div>
        <!----------------- --------------------->
      </div>
      <script type="text/javascript">

    </script>
    </div>
    <div class="products">
      <div><img src="../../Content/Images/featured.jpg" width="690" height="30" alt="Featured Products" /></div>
      <ul>
       <% foreach (var product in Model)
           { %>
      <li>
       <a href="<%: Url.Action("Details", "Store", new { id = product.ProductId }) %>">
          <div class="product-pic"><img src='/Content/Uploads/<%: product.Image %>' height="142" alt="<%: product.Name %>" /></div></a>
          <div class="p-name"><%: product.Name%><span class="price">Price:  $ <%: String.Format("{0:F}", product.Price) %></span></div>
          <div class="details">
          <a href="<%= Url.Action("Details","Store", new { id = product.ProductId})%>">
          <img  src="/Content/Images/view-details.jpg"  width="105" alt="View Details" height="30"/></a>
          </div>


          <div class="add-cart">
          <a href="<%= Url.Action("AddToCart","ShoppingCart", new { id = product.ProductId})%>" class="btn_addcart">
              <img src="/Content/Images/add-cart.jpg" width="105" height="30" alt="Add to Cart" />
          </a>
          </div>
        </li> 
        <% } %>

      </ul>
</div>
</div>
 </asp:Content>
